<template>
    <div class="login_container">
        <el-dialog v-model="userStore.visiable" title="用户登录">
            <!-- 对话框身体部分解构 -->
            <el-row>
                <el-col :span="12">
                    <div class="login">
                        <div v-show="scene==0">
                            <el-form :model="loginParam" :rules="rules" ref="form">
                                <el-form-item prop="phone">
                                    <el-input :prefix-icon="User" placeholder="请你输入手机号" v-model="loginParam.phone"></el-input>
                                </el-form-item>
                                <el-form-item prop="code">
                                    <el-input :prefix-icon="Lock" placeholder="请输入验证码" v-model="loginParam.code"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button :disabled="!isPhone||flag?true:false">
                                        <CountDown v-if="flag" :fla="flag" @getFla="getFlag"/>
                                        <span v-else @click="getCode">获取验证码</span>
                                    </el-button>
                                </el-form-item>
                            </el-form>
                            <div class="bottom" >
                                <el-button style="width:80%" type="primary" size="default" :disabled="!isPhone||loginParam.code.length<6?true:false" @click="login">用户登录</el-button>
                                <p>微信扫码登录</p>
                                <svg @click="changeScene" t="1697875136808" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6006" width="32" height="32"><path d="M352.814545 385.396364m-33.512727 0a33.512727 33.512727 0 1 0 67.025455 0 33.512727 33.512727 0 1 0-67.025455 0Z" fill="#50B674" p-id="6007"></path><path d="M502.690909 384.465455m-33.512727 0a33.512727 33.512727 0 1 0 67.025454 0 33.512727 33.512727 0 1 0-67.025454 0Z" fill="#50B674" p-id="6008"></path><path d="M576.232727 534.341818m-23.272727 0a23.272727 23.272727 0 1 0 46.545455 0 23.272727 23.272727 0 1 0-46.545455 0Z" fill="#50B674" p-id="6009"></path><path d="M694.458182 536.203636m-23.272727 0a23.272727 23.272727 0 1 0 46.545454 0 23.272727 23.272727 0 1 0-46.545454 0Z" fill="#50B674" p-id="6010"></path><path d="M512 0C229.003636 0 0 229.003636 0 512s229.003636 512 512 512 512-229.003636 512-512S794.996364 0 512 0z m-87.505455 630.225455c-26.996364 0-48.407273-5.585455-75.403636-11.17091l-75.403636 37.236364 21.410909-64.232727c-53.992727-37.236364-85.643636-85.643636-85.643637-145.221818 0-102.4 96.814545-182.458182 215.04-182.458182 105.192727 0 198.283636 64.232727 216.901819 150.807273-6.516364-0.930909-13.963636-0.930909-20.48-0.93091-102.4 0-182.458182 76.334545-182.458182 170.356364 0 15.825455 2.792727 30.72 6.516363 44.683636-7.447273 0-13.963636 0.930909-20.48 0.93091z m314.647273 75.403636l15.825455 53.992727-58.647273-32.581818c-21.410909 5.585455-42.821818 11.170909-64.232727 11.170909-102.4 0-182.458182-69.818182-182.458182-155.461818s80.058182-155.461818 182.458182-155.461818c96.814545 0 182.458182 69.818182 182.458182 155.461818 0 47.476364-31.650909 90.298182-75.403637 122.88z" fill="#50B674" p-id="6011"></path></svg>
                            </div>
                        </div>
                        <div class="webchat" v-show="scene==1">
                            <!-- 微信扫码登录的结构 -->
                            <div id="login_container"></div>
                            <div class="phone">
                                <p>手机短信验证码登录</p>
                                <svg @click="handler" t="1698305871333" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4178" width="16" height="16"><path d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z" p-id="4179"></path></svg>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="leftCotent">
                        <div class="top">
                            <div class="item">
                                <img src="../../assets/images/watch.png" alt="">
                                <svg t="1697875136808" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6006" width="16" height="16"><path d="M352.814545 385.396364m-33.512727 0a33.512727 33.512727 0 1 0 67.025455 0 33.512727 33.512727 0 1 0-67.025455 0Z" fill="#bfbfbf" p-id="6007"></path><path d="M502.690909 384.465455m-33.512727 0a33.512727 33.512727 0 1 0 67.025454 0 33.512727 33.512727 0 1 0-67.025454 0Z" fill="#bfbfbf" p-id="6008"></path><path d="M576.232727 534.341818m-23.272727 0a23.272727 23.272727 0 1 0 46.545455 0 23.272727 23.272727 0 1 0-46.545455 0Z" fill="#bfbfbf" p-id="6009"></path><path d="M694.458182 536.203636m-23.272727 0a23.272727 23.272727 0 1 0 46.545454 0 23.272727 23.272727 0 1 0-46.545454 0Z" fill="#bfbfbf" p-id="6010"></path><path d="M512 0C229.003636 0 0 229.003636 0 512s229.003636 512 512 512 512-229.003636 512-512S794.996364 0 512 0z m-87.505455 630.225455c-26.996364 0-48.407273-5.585455-75.403636-11.17091l-75.403636 37.236364 21.410909-64.232727c-53.992727-37.236364-85.643636-85.643636-85.643637-145.221818 0-102.4 96.814545-182.458182 215.04-182.458182 105.192727 0 198.283636 64.232727 216.901819 150.807273-6.516364-0.930909-13.963636-0.930909-20.48-0.93091-102.4 0-182.458182 76.334545-182.458182 170.356364 0 15.825455 2.792727 30.72 6.516363 44.683636-7.447273 0-13.963636 0.930909-20.48 0.93091z m314.647273 75.403636l15.825455 53.992727-58.647273-32.581818c-21.410909 5.585455-42.821818 11.170909-64.232727 11.170909-102.4 0-182.458182-69.818182-182.458182-155.461818s80.058182-155.461818 182.458182-155.461818c96.814545 0 182.458182 69.818182 182.458182 155.461818 0 47.476364-31.650909 90.298182-75.403637 122.88z" fill="#bfbfbf" p-id="6011"></path></svg>
                                <p>微信扫一扫关注</p>
                                <p>"快速预约挂号"</p>
                            </div>
                            <div class="item">
                                <img src="../../assets/images/guahao.png" alt="">
                                <svg t="1697876665452" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7278" width="16" height="16"><path d="M256 85.333333h512c64.8 0 117.333333 52.533333 117.333333 117.333334v618.666666c0 64.8-52.533333 117.333333-117.333333 117.333334H256c-64.8 0-117.333333-52.533333-117.333333-117.333334V202.666667c0-64.8 52.533333-117.333333 117.333333-117.333334z m0 64a53.333333 53.333333 0 0 0-53.333333 53.333334v618.666666a53.333333 53.333333 0 0 0 53.333333 53.333334h512a53.333333 53.333333 0 0 0 53.333333-53.333334V202.666667a53.333333 53.333333 0 0 0-53.333333-53.333334H256z m170.666667 618.666667a32 32 0 0 1 0-64h170.666666a32 32 0 0 1 0 64H426.666667z" fill="#000000" p-id="7279"></path></svg>
                                <p>扫一扫下载</p>
                                <p>"预约挂号APP"</p>
                            </div>
                        </div>
                        <p class="tip">syt官方指定平台</p>
                        <p class="tip">快速挂号 安全放心</p> 
                    </div>
                </el-col>
            </el-row>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="closeDialog">关闭窗口</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,computed,watch} from 'vue';
// 引入微信扫码登录参数请求
import {useRouter,useRoute} from 'vue-router';
import { reqWxLogin } from '@/api/hospital';
import { WxLoginResponseData } from '@/api/hospital/type';
import { User,Lock } from '@element-plus/icons-vue'
// 获取user仓库的数据(visiable)可以控制login组建的显示与隐藏
import {ElMessage} from 'element-plus'
import useUserStore from '@/store/modules/user';
let userStore = useUserStore();
// flag如果为真，开启倒计时
let flag=ref<boolean>(false)
// 手机号校验码
let reg = /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/;

//获取路由器对象
let $router = useRouter();
let $route = useRoute()

// 引入倒计时组件
import CountDown from '../countdown/index.vue'

// 0代表手机号码登录，1代表微信扫码登录
let scene = ref<number>(0);
// 获取form组件实例
let form = ref<any>()
// 收集表单数据 -- 手机号码
let loginParam = reactive({
    phone:'',
    code:''
})

// 计算出当前表单元素收集的内容是否是手机号码格式
let isPhone = computed(()=>{
    // 返回布尔值
    return reg.test(loginParam.phone);
})
// 点击微信图标切换为微信扫码登录
const changeScene=async()=>{
    scene.value=1
    // 发起请求获取微信扫码二维码需要的参数
    // 向硅谷学校服务器发起请求，获取微信扫码登录页面参数
    // 还需要携带一个参数：告诉学校服务器用户授权成功以后重定向项目某一个页面
    let redirect_URL = encodeURIComponent(window.location.origin+'/wxlogin');
    let result:WxLoginResponseData = await reqWxLogin(redirect_URL);
    console.log(result);
    // 将result得到的参数填写到下方对应值中
    // 生成微信扫码登录二维码页面
    // @ts-ignore
    new WxLogin({
        self_redirect:true,// true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri
        id:"login_container", // 显示二维码的容器id
        appid: result.data.data.appid, // 应用唯一标识，在微信开放平台提交应用审核通过后获得
        scope: "snsapi_login", // 当前微信扫码登录页面已经授权了
        redirect_uri: result.data.data.redirectUri,// 填写授权回调域路径，就是用户授权成功以后，微信服务器向公司后台推送code地址
        state: result.data.data.state,// state 就是学校服务器重定向的地址携带用户信息
        style: "black",
        href: ""
    });
}

// 获取验证码
const getCode=async ()=>{
    // 解决element-plus按钮禁用还能点击请求的问题
    if(!isPhone.value||flag.value) return;
    // 开启倒计时
    flag.value=true;
    try {
        await userStore.getCode(loginParam.phone);
        loginParam.code=userStore.code;
    } catch (error) {
        // 获取失败
        ElMessage({
            type:'error',
            message:(error as Error).message
        })
    }
    
}
// 接受子传递过来的flag值
// 当倒计时为0时，通知父组件倒计时组件隐藏
const getFlag = (val:boolean)=>{
    flag.value=val;
}

// 点击用户登录按钮回调
const login = async () =>{
    await form.value.validate();
    // 发起登录请求
    // 登录请求成功：顶部组件需要展示用户名字、对话框关闭
    try {
        // 用户登录成功
        await userStore.userLogin(loginParam);
        // 关闭对话框
        userStore.visiable=false;
        //获取url的query参数
        let redirect = $route.query.redirect;
        if(redirect){
            $router.push(redirect as string);
        }else{
            $router.push('/home');
        }
    } catch (error) {
        ElMessage({
            type:'error',
            message:(error as Error).message
        })
    }
}

// 手机号码自定义校验规则
const validatorPhone = (rule: any, value: any, callBack: any)=>{
    // rule:表单校验规则对象
    // value:当前文本内容
    // callBack:回调函数
    if(reg.test(value)){
        callBack();
    }else{
        callBack(new Error('请输入正确的手机号码格式'));
    }
}

// 验证码自定义校验规则
const validatorCode = (rule: any, value: any, callback: any)=>{
    if(/^\d{6}$/.test(value)){
        callback();
    }else{
        callback(new Error('请输入正确的验证码格式'));
    }
}

// 表单校验的规则对象
const rules ={
    // 手机号码校验规则
    // trigger:代表表单校验触发时机{
        // change:文本发生变化的时候进行校验
        // blur:失去焦点的时候进行校验
    // }
    phone:[
        { validator:validatorPhone, trigger: 'blur' },
    ],
    code:[ 
        { validator:validatorCode, trigger: 'blur' }
    ]
}

// 关闭窗口按钮的回调
const closeDialog = ()=>{
    // 关闭窗口
    userStore.visiable=false;
}

// 点击手机图标回调
const handler =()=>{
    scene.value=0;
}

// 监听场景的数据
watch(()=>scene.value,(val:number)=>{
    if(val==1){
        userStore.queryState();
    }
})
</script>

<style scoped lang="scss">
.login_container{
    :deep(.el-dialog__body){
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    .login{
        border: 1px solid #ccc;
        padding: 10px;
        .webchat{
            display: flex;
            flex-direction: column;
            align-items: center;
            .phone{
                display: flex;
                flex-direction: column;
                align-items: center;
                p{
                    margin: 10px 0px;
                }
            }
        }
    }
    .bottom{
        display: flex;
        flex-direction: column;
        align-items: center;
        p{
            margin: 10px 0px;
        }
    }
    .leftCotent{
        .top{
            display: flex;
            justify-content: space-between;
            .item{
                display: flex;
                flex-direction: column;
                align-items: center;
                img{
                    width: 130px;
                    height: 130px;
                }
                p{
                    margin: 5px 0px;
                }
            }
        }
        .tip{
            text-align: center;
            margin: 20px 0px;
            font-size: 20px;
            font-weight: 900;
        }
    }
}

</style>